<template>
  <div class="container">
    <van-nav-bar title="我的订单" placeholder fixed />
    <!-- <van-divider /> -->
    <van-empty description="暂无订单" v-if="orderList.length == 0"/>
    <div class="order_wrap" v-else>
      <div class="order" v-for="v in orderList" :key="v.orderID">
        <van-card
      :price="v.orderMoney"
      thumb="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588937559595&di=168cf89e1f88e790531149276e7bb465&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2014%2F11%2F27%2FFuv2Fej7Ll5Q3tGzjh6cp66A2Owl.jpg%2521730x0.jpg">
      <template #title>
        <div class="order_title">
          <span class="order_food_name">{{v.orderFood | handleOrderFoods}}</span>
          <span  class="order_time" v-if="v.orderState == 1">{{v.orderDate | dateFormat1}}</span>
          <span class="order_time" v-else>{{v.orderDate | dateFormat0}}</span>
        </div>
      </template>
      <template #tags>
        <van-tag plain type="success" v-if="v.orderState == 1" class="margintop10">已经送达</van-tag>
        <van-tag type="warning" plain v-else class="margintop10">等待配送</van-tag>
      </template>
      <template #footer>
        <div v-if="v.orderState == 1">
          <van-button size="small" plain @click="toCall(1)">联系客服</van-button>
          <van-button size="small" type="info" plain @click="tocomment(v.orderID)" :disabled="v.passengerReviews == null ? false : true">评价</van-button>
        </div>
        <div v-else>
          <van-button size="small" type="danger" plain @click="toCall(0)">取消订单</van-button>
        <van-button size="small" type="info" plain @click="toCall(2)">催单</van-button>
        </div>
      </template>
    </van-card>
      </div>
     
    </div>

  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      orderList: []
    };
  },
  created() {
    // 加载页面时设置底部导航栏激活状态
    this.$store.commit("setBottomNavActive", 2);
    this.getUserOrderList()
  },
  methods: {
    //获取订单列表
    async getUserOrderList() {
      let { data: res } = await this.$http.get('order')
      console.log(res.data);
      
      const { userID } = JSON.parse(window.localStorage.getItem("user"))
       let orderList = res.data.filter(v => v.userID == userID)
      //  处理后台传来的食物格式
       orderList.forEach(v => {
        v.orderFood = v.orderFood.split(',').map(m => m.split(' '))
      })
       this.orderList = orderList.sort((a,b) => b.orderDate - a.orderDate)
       console.log('this.orderList: ', this.orderList);
    },
    //打电话给客服
    toCall(type) {
      var title,message
      if(type == 1) {
        title = '联系客服'
        message = '您确定要拨打客服热线158****9548吗？'
      }
      else if(type == 2) {
        title = '催单'
        message = '您确定要拨打给客服158****9548来催单吗？'
      }
      else {
        title = '取消订单'
        message = '您确定要拨打客服热线158****9548来取消订单吗？（注意需表明原因）'
      }
      Dialog.confirm({
        title,
        message
      })
        .then(() => {})
        .catch(() => {});
    },
    //点击评价按钮
    tocomment(orderID) {
      this.$store.commit('setCommentOrderID',orderID)
      this.$router.push('/comment')
    }
  },
    filters: {
      handleOrderFoods: (val) => {
        var str = ''
        if(val.length > 2) {
          str = val[0][0] + 'x' + val[0][1] + ',' + val[1][0] + 'x' + val[1][1] + '...'
        } else {
          val.forEach( (v,i) => {
          str += v[0] + 'x' + v[1]
          if(val.length-1 != i ) str+= ','
        })
        }
        return str
      },
      //未送达时间处理 19min前
      dateFormat0: (val) => {
        const dt = new Date(Number(val))
        const nowdt = new Date()
        let span = nowdt - dt
        // 小于1min 56s前 1min = 60s=60*1000ms
        if(span < 60*1000) return Math.floor(span/1000) + 's前'
        //小于1小时 30min前 
        if(span < 60*60*1000) return Math.floor(span/60000) + 'min前'
        //大于一小时 1h前
        return Math.floor(span/3600000) + 'h前'
      },
      //已送达时间处理  5-20 15：30
      dateFormat1: (val) => {
        const dt = new Date(Number(val))
        const m = (dt.getMonth() + 1 + '').padStart(2, 0)
        const d = (dt.getDate() + '').padStart(2, 0)
        const hh = (dt.getHours() + '').padStart(2, 0)
        const mm = (dt.getDate() + '').padStart(2, 0)
        return `${m}-${d} ${hh}:${mm}`
      }
    }
};
</script>
<style lang="less" scoped>
.container {
  padding-bottom: 60px;
}
.order {
  margin: 5px auto;
}
.order_wrap .order:first-child {
  margin: 0;
}

.order_title {
  display: flex;
  justify-content: space-between;
  .order_food_name {
  }
  .order_time {
  }
}
.margintop10 {
  margin-top: 10px;
}
</style>
